import * as echarts from 'echarts';

let rateChart = {};
let lineChart = {};
const numberLevel = { 0: '0', 20: '20', 40: '40', 60: '60', 80: '80', 100: '100' };
let lineRate = {};
export function setRateChart(id, name, value) {
	if (rateChart[id] !== null && rateChart[id]) {
		rateChart[id].dispose();
		rateChart[id] = null;
	}
	rateChart[id] = echarts.init(document.getElementById(id));
	let pre = value / 100;
	let option = {
		backgroundColor: '#FFFFFF',
		color: ['#37A2DA', '#32C5E9', '#67E0E3'],
		series: [
			{
				type: 'gauge',
				detail: {
					formatter: name,
					color: '#999',
					fontSize: 13,
				},
				radius: '90%',
				center: ['55%', '50%'],
				title: {
					show: true,
					offsetCenter: [0, '80%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
					textStyle: {
						fontSize: 18,
						color: '#333',
						fontWeight: 'bolder',
					},
				},
				axisLabel: {
					distance: 0,
					color: '#333',
					fontSize: 12,
					splitNumber: 1,
					lineStyle: {
						color: 'red',
					},
					formatter: function (v) {
						return numberLevel[v];
					},
				},
				axisTick: {
					// 刻度(线)样式。
					show: true, // 是否显示刻度(线),默认 true。
					splitNumber: 1,
				},
				splitLine: {
					show: false,
					length: 30,
				},
				axisLine: {
					show: true,
					lineStyle: {
						width: 8,
						shadowBlur: 0,
						color: [
							[
								pre,
								{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [
										{
											offset: 0,
											color: '#62F68A', // 0% 处的颜色
										},
										{
											offset: 1,
											color: '#5183FF', // 100% 处的颜色
										},
									],
									global: false, // 缺省为 false
								},
							],
							[1, '#E6EBF8'],
						],
					},
				},
				max: 100,
				splitNumber: 5,
				data: [
					{
						value: value,
						name: value + '%',
						itemStyle: {
							color: '#1890ff',
							fontSize: 18,
							foontWeight: '500',
						},
					},
				],
			},
		],
	};
	rateChart[id].setOption(option);
}

export function setLineChart(id, title, arr1, arr2) {
	if (lineChart[id] !== null && lineChart[id]) {
		lineChart[id].dispose();
		lineChart[id] = null;
	}
	lineChart[id] = echarts.init(document.getElementById(id));
	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#1890ff',
				},
			},
      valueFormatter:(value) =>{
        return value + '%';
      },
		},
    // tooltip: {
      
    // },
 
		// legend: {
		//   data: arr1
		// },
		grid: {
			left: 10,
			right: 32,
			bottom: 0,
			top: 20,
			containLabel: true,
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: false,
				data: arr1,
			},
		],
		yAxis: [
			{
				type: 'value',
				axisLabel: {
					formatter: '{value}%',
				},
			},
		],
		series: [
			{
				name: title,
				type: 'line',
				smooth: true,
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(
							0,
							0,
							0,
							1,
							[
								{
									offset: 0,
									color: 'RGBA(24, 144, 255, 1)',
								},
								{
									offset: 1,
									color: 'RGBA(24, 144, 255, 0.2)',
								},
							],
							false
						),
						shadowColor: 'RGBA(80, 38, 72, 0.2)',
						shadowBlur: 20,
					},
				},
			
				emphasis: {
					focus: 'series',
				},
				data: arr2,
			},
		],
	};
	lineChart[id].setOption(option);
}

export function setLineRate(id, name, value, color = '#1890ff') {
	if (lineRate[id] !== null && lineRate[id]) {
		lineRate[id].dispose();
		lineRate[id] = null;
	}
	lineRate[id] = echarts.init(document.getElementById(id));
	let option = {
		backgroundColor: '#fff',
		title: [
			{
				text: name,
				x: 'center',
				top: '35%',
				textStyle: {
					color: '#999',
					fontSize: 12,
					fontWeight: '100',
				},
			},
			{
				text: value + '%',
				x: 'center',
				top: '55%',
				textStyle: {
					fontSize: 18,
					color: '#333',
					// foontWeight: '500',
				},
			},
		],
		series: [
			{
				type: 'gauge',
				radius: '85%',
				clockwise: true,
				startAngle: '90',
				endAngle: '-270',
				splitNumber: 10,
				detail: {
					offsetCenter: [0, -20],
					formatter: ' ',
				},
				pointer: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: [
							[value / 100, color],
							[1, 'rgb(240,242,245)'],
						],
						width: 10,
					},
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: false,
					length: 32,
					lineStyle: {
						color: 'white',
						width: 3,
					},
				},
				axisLabel: {
					show: false,
				},
			},
		],
	};

	lineRate[id].setOption(option);
}
